<div class="contributor-groups">
  <div class="contributor-people">
    <div class="contributor-img-list" [ngClass]="{ 'padd-left': totalResult > 0 }" [@cardAnimation]="totalResult">
      <mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
      <ng-container *ngIf="totalResult < 10; else compact">
        <ng-container *ngFor="let member of membersSubject | async; index as i">
          <div
            @animate
            (click)="emitShowDetail()"
            class="contributor-avatar-circle"
            matTooltip="{{ member.displayName }} | {{ member.rolesList | roletransform }}"
            [ngStyle]="{ 'z-index': 20 - i }"
            data-e2e="member-avatar"
          >
            <cnsl-avatar
              *ngIf="member && member.userType === UserType.TYPE_HUMAN; else cog"
              class="contributor-avatar dontcloseonclick"
              [avatarUrl]="member.avatarUrl || ''"
              [name]="member.displayName"
              [forColor]="member.preferredLoginName"
              [size]="32"
            >
            </cnsl-avatar>
            <ng-template #cog>
              <cnsl-avatar [forColor]="member.preferredLoginName" [isMachine]="true">
                <i class="las la-robot"></i>
              </cnsl-avatar>
            </ng-template>
          </div>
        </ng-container>
      </ng-container>
      <ng-template #compact>
        <div
          (click)="emitShowDetail()"
          class="contributor-avatar-circle"
          matTooltip="{{ 'MEMBER.SHOWDETAILS' | translate }}"
        >
          <span>{{ totalResult }}</span>
        </div>
      </ng-template>
      <button
        class="add-img"
        [ngClass]="{ 'no-margin': totalResult === 0 }"
        (click)="emitAddMember()"
        [disabled]="disabled"
        mat-icon-button
        matTooltip="{{ 'MEMBER.ADD' | translate }}"
        aria-label="Add member"
        data-e2e="add-member-button"
      >
        <mat-icon>add</mat-icon>
      </button>
    </div>
  </div>
</div>
